<template>
  <div>
    <el-radio-group v-model="radio" style="margin-bottom: 20px">
      <el-radio-button label="实时监测"></el-radio-button>
      <el-radio-button label="历史查询"></el-radio-button>
    </el-radio-group>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>电能质量</el-breadcrumb-item>
      <el-breadcrumb-item>三相不平衡</el-breadcrumb-item>
      <el-breadcrumb-item v-if="radio == '实时监测'"
        ><a href="#/threePhaseUnbalance" style="cursor: pointer; color: #fff"
          >实时监测</a
        ></el-breadcrumb-item
      >
      <el-breadcrumb-item v-if="radio == '历史查询'"
        ><a href="#/threePhaseUnbalance" style="cursor: pointer; color: #fff"
          >历史查询</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="flex1">
      <div class="left">
        <div style="position: relative; margin-left: 10px">
          <div class="biaoti">
            <div style="margin-left: 10px">仪表树</div>
          </div>
        </div>
        <div style="padding: 10px" class="flex">
          <el-input
            v-model="filterText"
            placeholder="请输入关键字检索"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
          ></el-button>
        </div>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
        >
        </el-tree>
      </div>
      <div class="right">
        <div style="position: relative; margin-left: 10px">
          <div class="biaoti">
            <div style="margin-left: 10px">三相不平衡组件</div>
          </div>
        </div>
        <div class="flex1">
          <div class="right1">
            <div style="position: relative; margin-left: 10px">
              <div class="biaoti">
                <div style="margin-left: 10px">相位图</div>
              </div>
            </div>
            <div id="main" style="height: 250px; width: 100%"></div>
            <div>
              <el-table
                border
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                cell-style="color:#fff"
                header-cell-style="color:#fff;background:rgb(27, 79, 133)"
              >
                <el-table-column prop="1" label="数据类型"></el-table-column>
                <el-table-column prop="2" label="A相"></el-table-column>
                <el-table-column prop="3" label="B相"></el-table-column>
                <el-table-column prop="4" label="C相"></el-table-column>
                <el-table-column prop="5" label="中性相"></el-table-column>
              </el-table>
            </div>
            <div class="flex">
              <el-table
                border
                ref="multipleTable"
                :data="tableData1"
                tooltip-effect="dark"
                style="width: 100%"
                cell-style="color:#fff"
                header-cell-style="color:#fff;background:rgb(27, 79, 133)"
              >
                <el-table-column label="序分量-电压">
                  <template slot-scope="scope">
                    <div class="flex2">
                      <div>{{ scope.row[1] }}</div>
                      <div style="color: rgb(50, 138, 201)">
                        {{ scope.row[2] }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                border
                ref="multipleTable"
                :data="tableData2"
                tooltip-effect="dark"
                style="width: 100%"
                cell-style="color:#fff"
                header-cell-style="color:#fff;background:rgb(27, 79, 133)"
              >
                <el-table-column label="序分量-电流">
                  <template slot-scope="scope">
                    <div class="flex2">
                      <div>{{ scope.row[1] }}</div>
                      <div style="color: rgb(28, 189, 174)">
                        {{ scope.row[2] }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="right2">
            <div>
              <div style="position: relative; margin-left: 10px">
                <div class="biaoti">
                  <div style="margin-left: 10px">不平衡度</div>
                </div>
              </div>
              <div class="jianchajieguo">
                <span>检查结果：</span>
                <span style="color: rgb(28, 189, 174)">合格</span>
              </div>
            </div>
            <el-table
              border
              ref="multipleTable"
              :data="tableData3"
              tooltip-effect="dark"
              style="width: 100%"
              cell-style="color:#fff"
              header-cell-style="color:#fff;background:rgb(27, 79, 133)"
            >
              <el-table-column label="数据类型" prop="1"></el-table-column>
              <el-table-column label="实时值" prop="2"></el-table-column>
              <el-table-column label="历史最大值">
                <el-table-column label="数值" prop="3"></el-table-column>
                <el-table-column label="时间" prop="4"></el-table-column>
              </el-table-column>
              <el-table-column label="历史最小值">
                <el-table-column label="数值" prop="5"></el-table-column>
                <el-table-column label="时间" prop="6"></el-table-column>
              </el-table-column>
            </el-table>
            <el-radio-group v-model="radio1" style="margin: 20px 0">
              <el-radio-button label="电压不平衡度"></el-radio-button>
              <el-radio-button label="电流不平衡度"></el-radio-button>
              <el-radio-button label="基波电压有效值"></el-radio-button>
              <el-radio-button label="基波电流有效值"></el-radio-button>
              <el-radio-button label="电压序分量"></el-radio-button>
              <el-radio-button label="电流序分量"></el-radio-button>
            </el-radio-group>
            <div id="main1" style="height: 530px; width: 100%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      radio: "实时监测",
      radio1: "电压不平衡度",
      filterText: "",
      data: [
        {
          id: 1,
          label: "区域",
          children: [
            {
              id: 2,
              label: "一期办公楼配电柜780H",
            },
            {
              id: 3,
              label: "二期高压配电柜780H",
            },
            {
              id: 4,
              label: "二期2#变压器进线柜780H",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      value1: "",
      tableData: [
        {
          1: "基波电压有效值",
          2: "240.86V",
          3: "241.49V",
          4: "241.9V",
          5: "OV",
        },
        {
          1: "基波电压相角",
          2: "0°",
          3: "239.92°",
          4: "119.66°",
          5: "0°",
        },
        {
          1: "基波电流有效值",
          2: "0.25A",
          3: "0.49A",
          4: "5.47A",
          5: "0A",
        },
        {
          1: "基波电流相角",
          2: "345.98°",
          3: "258.38°",
          4: "126.86°",
          5: "0A",
        },
      ],
      tableData1: [
        {
          1: "负序电压",
          2: "0.67V",
        },
        {
          1: "零序电压",
          2: "0.28V",
        },
        {
          1: "正序电压",
          2: "241.44V",
        },
      ],
      tableData2: [
        {
          1: "负序电流",
          2: "1.75A",
        },
        {
          1: "零序电流",
          2: "1.64A",
        },
        {
          1: "正序电流",
          2: "2.05A",
        },
      ],
      tableData3: [
        {
          1: "负序电压不平衡度",
          2: "0.28%",
          3: "-%",
          4: "1970 01-01 00:00:00",
          5: "-%",
          6: "1970 01-01 00:00:00",
        },
      ],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = (option = {
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "A相", "B相", "C相", "中性相"],
            ["电流", 41.1, 30.4, 65.1, 53.3],
            ["电压", 86.5, 92.1, 85.7, 83.1],
          ],
        },
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        // grid: [{ bottom: "55%" }],
        series: [
          // These series are in the first grid.
          { type: "bar", seriesLayoutBy: "row" },
          { type: "bar", seriesLayoutBy: "row" },
        ],
      });
      myChart.setOption(option);
    },
    initCharts1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main1"));

      // 指定图表的配置项和数据
      var option = (option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["负序电压负平衡度", "零序电压负平衡度"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "11:00:00",
            "12:00:00",
            "13:00:00",
            "14:00:00",
            "15:00:00",
            "16:00:00",
            "18:00:00",
          ],
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "负序电压负平衡度",
            type: "line",
            stack: "Total",
            data: [0.05, 0.05, 0.1, 0.5, 0.3, 0.3, 0.8],
          },
          {
            name: "零序电压负平衡度",
            type: "line",
            stack: "Total",
            data: [0.15, 0.4, 0.4, 0.65, 0.8, 0.3, 0.1],
          },
        ],
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initCharts();
    this.initCharts1();
  },
};
</script>
  
  <style scoped>
.jianchajieguo {
  position: absolute;
  right: 20px;
  top: 20px;
}

.right1 {
  width: 33%;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
}

.right2 {
  width: 67%;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  position: relative;
}

.biaoti {
  margin: 20px 0;
}
.biaoti::after {
  content: "";
  width: 5px;
  height: 20px;
  background: rgb(82, 124, 240);
  position: absolute;
  top: 0;
  left: 0;
}

.left {
  width: 20vw;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  margin: 20px 0;
}

.right {
  width: 80vw;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  margin: 20px 0;
}

.select {
  margin: 20px;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}
</style>